<script lang='ts' setup>
import { reactive, ref, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import JxudpDataSourceServiceApi from '/@/api/org/bean/jxudp-data-source'
import { SearchFormColumn } from '/@/components/platform/search/search-form/interface'
import { deletePageTableSelectionPkList } from '/@/utils/api-service'
import { JxudpDataSourceEditUrl } from '/@/views/org/mapping.json'


const JxudpDataSourcePageTableRef = ref()
const router = useRouter()


const queryColumn: SearchFormColumn[] = [
    { name: 'likeAll', type: 'input', label: '模糊搜索', placeholder: '请输入数据源描述/连接字符串' }
]
const JxudpDataSourceState = reactive({
    // ////////////////////搜索部分/////////////////////////////////////////
    queryForm: { likeAll: null },
    queryColumn,
    ///////////////////////表格部分//////////////////////////////////////
    /**
     * 表格的列配置
     */
    tableColumn: [
        { label: '序号', width: '50', type: 'selection' },
        { label: '序号', width: '50', type: 'index' },
        {
            prop: "dataSourceId", label: "数据源名称", width: "180", align: 'left', showOverflowTooltip: true, sort: { sortable: 'custom' }, type: 'link',
            linkClick: (row: any) => {
                router.push({ path: JxudpDataSourceEditUrl + row.dataSourceId })
            }
        },
        { prop: "dataSourceDesc", label: "数据源描述", align: 'left', showOverflowTooltip: true, columnKey: "dataSourceDesc" },
        { prop: "connUrl", label: "连接字符串", align: 'left', showOverflowTooltip: true, columnKey: "connUrl" },
        { prop: "jndiName", label: "JNDI名称", showOverflowTooltip: true, columnKey: "jndiName" },
        { prop: "jndi", label: "是否为JNDI", columnKey: "jndi", slot: 'customJndi' },
    ],
    /**
     * 表格数据加载的方法
     */
    loadData: (params: any) => JxudpDataSourceServiceApi.queryPage(null, { ...params, ...JxudpDataSourceState.queryForm }),
    /**
     * 表格导出excel的方法
     */
    expData: (params: any) => JxudpDataSourceServiceApi.exportData(null, { ...params, ...JxudpDataSourceState.queryForm }),
    /**
     * 表格删除事件
     */
    deleteTableData: () => {
        //删除表格数据提供两种不同的api 一个是整行数据数组删除 一个是取行主键id数组删除
        deletePageTableSelectionPkList(JxudpDataSourcePageTableRef, JxudpDataSourceServiceApi)
    },
    /**
     * 搜索事件触发
     */
    handleSearch: () => {
        nextTick(() => {
            JxudpDataSourcePageTableRef.value.loadTable()
        })
    },

})

defineExpose({
    getJxudpDataSourcePageTableRef: () => JxudpDataSourcePageTableRef.value,
    onDelButtonClick: () => JxudpDataSourceState.deleteTableData()
})

</script>
<template>
    <div>
        <div class="container-card">
            <jxtech-page-table
                ref="JxudpDataSourcePageTableRef"
                row-key="dataSourceId"
                :table-column="JxudpDataSourceState.tableColumn"
                :load-data="JxudpDataSourceState.loadData"
                :downloadShow="false"
                fit="full"
            >
                <template #header>
                    <div class="jxtech-page-table-header-flex">
                        <jxtech-search-form
                            :query-column="JxudpDataSourceState.queryColumn"
                            :query-form="JxudpDataSourceState.queryForm"
                            @handle-search="JxudpDataSourceState.handleSearch"
                            :col-span="12"
                        ></jxtech-search-form>
                    </div>
                </template>
                <template #customJndi="{ row }">
                    <el-tag v-if="row.jndi" class="ml-2" type="success">是</el-tag>
                    <el-tag v-else class="ml-2" type="warning">否</el-tag>
                </template>
            </jxtech-page-table>
        </div>
    </div>
</template>

<style scoped>
</style>